<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
        <style>
        	*{
        		padding: 0;
        		margin: 0;
        	}
        	#box{
        		width: 100px;
        		height: 100px;
        		background: pink;
        	}
        </style>
	</head>
	<body>
<div id="box"></div>
<script>
var oBox = document.querySelector("#box");
var startPoint = 0;
var startX = 0,startY=0;
var translateX = 0,translateY = 0;
oBox.addEventListener(
	"touchstart",
	function(e) {
		startPointX = e.changedTouches[0].pageX;
		startPointY = e.changedTouches[0].pageY;
		startX = translateX;
		startY = translateY;
		//阻止页面的滑动默认事件
        document.addEventListener("touchmove",defaultEvent,false);
	});

oBox.addEventListener(
	"touchmove",
	function(e) {
		var nowPointX = e.changedTouches[0].pageX;
		var nowPointY = e.changedTouches[0].pageY;
		var disX = nowPointX - startPointX;
		var disY = nowPointY - startPointY;
		translateX= startX + disX;
		translateY= startY + disY;
		
		//边界
/*		if(translateX<0){
			translateX=0
		}else if(translateX>document.documentElement.clientWidth-oBox.offsetWidth){
			translateX=document.documentElement.clientWidth-oBox.offsetWidth
		}
		if(translateY<0){
			translateY=0
		}else if(translateY>document.documentElement.clientHeight-oBox.offsetHeight){
			translateY=document.documentElement.clientHeight-oBox.offsetHeight
		}
*/
		
		translateX=Math.min(Math.max(translateX,0),document.documentElement.clientWidth-oBox.offsetWidth)
        translateY=Math.min(Math.max(translateY,0),document.documentElement.clientHeight-oBox.offsetHeight)
	
	    oBox.style.WebkitTransform = oBox.style.transform = "translate("+translateX+"px,"+translateY+"px)";
	    
	}
);
oBox.addEventListener(
	"touchend",
	function(e) {	
		document.removeEventListener("touchmove",defaultEvent,false);
	}
);
function defaultEvent(e) {
   e.preventDefault();
}
</script>


</body>
</html>
